<!--
 * @Description: 数据接收弹窗
-->
<template>
    <div>
        <t-modal
            title="数据接收"
            destroyOnClose
            :visible="visible"
            :width="800"
            @ok="handOK"
            @cancel="handCancel"
        >
            <a-alert message="当流程进行到本节点时，将上一节点表单字段数据传递到本节点表单字段" banner style="margin-bottom: 10px;"/>
            <a-tabs>
                <a-tab-pane v-for="(item,i) in lastFieldList" :tab="item.frontNodeName" :key="i">
                    <div class="rule-add">
                        <a-button type="primary" icon="plus" @click="addRule(i)">新增规则</a-button>
                        <a-tooltip placement="right">
                            <template slot="title">
                                根据字段的数据字段快速匹配规则(字段的数据字段可在表单设计中列表字段步骤查看)
                            </template>
                            <a-button type="link" icon="swap" @click="matchingField(i)" :loading="matchingFieldLoading">
                                一键添加相同字段
                            </a-button>
                        </a-tooltip>
                    </div>
                    <div v-if="item.ruleList.length > 0" class="rule-list-box">
                        <a-row :gutter="10" style="margin-bottom: 10px;" v-for="(obj, index) in item.ruleList" :key="index">
                            <a-col :span="3" class="rule-col rule-text">上节点的</a-col>
                            <a-col :span="7" class="rule-col">
                                <a-select
                                    v-model="obj.frontFormField"
                                    placeholder="请选择字段"
                                    show-search
                                    allowClear
                                    style="width: 100%;"
                                    option-filter-prop="children"
                                    :filter-option="filterOption"
                                    @change="selectFrontField(item, $event, index, i)"
                                >
                                    <a-select-option v-for="field in item.formFieldList" :key="field.filed">
                                        {{field.filedName}}({{ field.filedType }})
                                    </a-select-option>
                                </a-select>
                            </a-col>
                            <a-col :span="2" class="rule-col rule-assign">
                                赋值给
                            </a-col>
                            <a-col :span="3" class="rule-col">本节点的</a-col>
                            <a-col :span="7" class="rule-col">
                                <a-select
                                    v-model="obj.postFormField"
                                    placeholder="请选择字段"
                                    show-search
                                    allowClear
                                    style="width: 100%;"
                                    option-filter-prop="children"
                                    :filter-option="filterOption"
                                    @change="selectPostField($event, index, i)"
                                >
                                    <a-select-option v-for="field in nowFieldList" :key="field.filed">
                                        {{field.filedName}}({{ field.filedType }})
                                    </a-select-option>
                                </a-select>
                            </a-col>
                            <a-col :span="2" class="rule-col rule-delete">
                                <a-button type="link" icon="delete" class="action-delete" @click="deleteRule(i, index)"/>
                            </a-col>
                        </a-row>
                    </div>
                    <a-empty v-else/>
                </a-tab-pane>
            </a-tabs>
        </t-modal>
    </div>
</template>

<script>
    export default {
        props: {
            visible: {
                default: false,
            },
            // 本节点字段列表
            nowFieldList: {
                type: Array,
                default: () => [],
            },
            // 前节点列表(单个或多个)
            lastNodeList: {
                type: Array,
                default: () => [],
            },
        },
        data() {
            return {
                dataList: [], // 传递规则列表
                lastFieldList: [], // 过滤处理上节点的列表
                storeList: [], // 存储(旧)上节点列表，用于取消操作
                matchingFieldLoading: false,
            }
        },
        watch: {
            visible(val) {
                if (val) {
                    this.lastFieldList = [];
                    if (this.lastNodeList.length !== 0) {
                        this.lastFieldList = this.lastNodeList;
                        this.storeList = JSON.parse(JSON.stringify(this.lastNodeList));
                    }
                }
            },
        },
        methods: {
            // 选择前节点字段
            selectFrontField(item, value, index, i) {
                if (!value) return;
                let selectField = item.formFieldList.find(obj => obj.filed === value);
                this.lastFieldList[i].ruleList[index].frontFormFieldName = selectField.filedName;
                this.lastFieldList[i].ruleList[index].frontFormFieldType = selectField.filedType;
            },
            // 选择本节点字段
            selectPostField(value, index, i) {
                if (!value) return;
                let selectField = this.nowFieldList.find(obj => obj.filed === value);
                this.lastFieldList[i].ruleList[index].postFormFieldName = selectField.filedName;
                this.lastFieldList[i].ruleList[index].postFormFieldType = selectField.filedType;
            },
            // 新增传递规则
            addRule(i) {
                this.lastFieldList[i].ruleList.push({
                    frontFormField: undefined,
                    frontFormFieldName: undefined,
                    frontFormFieldType: undefined,
                    postFormField: undefined,
                    postFormFieldName: undefined,
                    postFormFieldType: undefined,
                })
            },
            // 匹配相同字段
            matchingField(i) {
                this.matchingFieldLoading = true;
                let matchedFields = [];
                this.lastFieldList[i].formFieldList.forEach(frontFormField => {
                    // 用于存储已经匹配的字段
                    this.nowFieldList.forEach(postFormField => {
                        if (frontFormField.filed === postFormField.filed && !matchedFields.includes(frontFormField.filed)) {
                            this.lastFieldList[i].ruleList.push({
                                frontFormField: frontFormField.filed,
                                frontFormFieldName: frontFormField.filedName,
                                frontFormFieldType: frontFormField.filedType,
                                postFormField: postFormField.filed,
                                postFormFieldName: postFormField.filedName,
                                postFormFieldType: postFormField.filedType,
                            });
                            matchedFields.push(frontFormField.filed);
                        }
                    });
                });
                setTimeout(() => {
                    // 检查是否找到匹配的字段
                    if (matchedFields.length === 0) {
                        this.$message.warn('节点之间没有相同字段，请手动配置规则', 1.5);
                    } else {
                        this.$message.success('匹配完成', 1.5);
                    }
                    this.matchingFieldLoading = false;
                }, 300);
            },
            // 删除传递规则
            deleteRule(i, index) {
                this.lastFieldList[i].ruleList.splice(index, 1);
            },
            // 确定
            handOK() {
                let hasError = false;
                let emptyNodes = []; // 存储已经发现的未填写节点
                let duplicateNodes = []; // 存储已经发现的重复节点
                this.lastFieldList.forEach(item => {
                    let checkedFields = []; // 存储已经遍历过的 postFormField
                    item.ruleList.forEach(rule => {
                        if (rule.frontFormField === undefined || rule.postFormField === undefined) {
                            if (!emptyNodes.includes(item.frontNodeName)) { // 检查变量中是否包含当前节点
                                this.$message.warn(`请完整填写【${item.frontNodeName}】节点内的赋值规则`);
                                emptyNodes.push(item.frontNodeName);
                            }
                            hasError = true;
                            return false;
                        }
                        if (checkedFields.includes(rule.postFormField)) {
                            if (!duplicateNodes.includes(item.frontNodeName)) { // 检查变量中是否包含当前节点
                                this.$message.warn(`本节点字段【${rule.postFormFieldName}】存在重复赋值规则`);
                                duplicateNodes.push(item.frontNodeName);
                            }
                            hasError = true;
                            return false;
                        }
                        if (rule.frontFormFieldType !== rule.postFormFieldType) {
                            this.$message.warn(`前置字段【${rule.frontFormFieldName}】和后置字段【${rule.postFormFieldName}】的字段类型不同`);
                            hasError = true;
                            return false;
                        }
                        checkedFields.push(rule.postFormField);
                    });
                    if (hasError) {
                        return false;
                    }
                });
                if (!hasError) {
                    this.$emit('ok', this.lastFieldList);
                }
            },
            // 取消
            handCancel() {
                this.$emit('cancel', this.storeList);
            },
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
        },
    }
</script>

<style lang="less" scoped>
    /deep/.ant-modal-body {
        height: 400px;
    }
    .rule-add {
        margin-bottom: 10px;
    }
    .rule-list-box {
        max-height: 235px;
        overflow-x: hidden;
        overflow-y: scroll;
        .rule-col {
            line-height: 32px;
            &.rule-text {
                text-align: center;
            }
            &.rule-assign {
                color: #1890ff;
                text-align: center;
            }
            &.rule-delete {
                text-align: center;
            }
        }
    }
</style>